<!--
 * @Author: Xujianchen
 * @Date: 2024-08-02 16:59:45
 * @LastEditors: Xujianchen
 * @LastEditTime: 2025-01-21 10:27:28
 * @Description: 
-->
<template>
  <Wrapper>
    <el-card shadow="never">
      <el-button type="primary" style="margin-bottom: 22px" @click="getValue"
        >获取值</el-button
      >
      <json-editor
        v-model="config.data"
        :deep="config.deep"
        :show-double-quotes="config.showDoubleQuotes"
        :show-line="config.showLine"
        :show-length="config.showLength"
        :show-icon="config.showIcon"
        :show-line-number="config.showLineNumber"
        :editable="config.editable"
        :editable-trigger="config.editableTrigger"
      />
    </el-card>
  </Wrapper>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import JsonEditor from '@/components/json-editor'
import useAuthStore from '@/store/modules/auth'

const authStore = useAuthStore()

const config = ref({
  data: [],
  showLine: true,
  showLineNumber: true,
  showDoubleQuotes: true,
  showLength: true,
  editable: true,
  showIcon: true,
  editableTrigger: 'click',
  deep: 8,
})

onMounted(() => {
  config.value = {
    ...config.value,
    val: JSON.stringify(authStore.menuList),
    data: authStore.menuList,
  }
})

function getValue() {
  ElMessage.success('打开控制台查看')
  console.log(config.value.data)
}
</script>
